<template>
  <view class="page">
    <u-navbar
      @leftClick="navLeftClick"
      :fixed="false"
      title="果然年代"
      placeholder
      bgColor="transparent"
    ></u-navbar>
    <view style="padding: 0 48rpx;display: flex;flex-direction: column;flex: 1;">
      <view class="u-flex-1">
        <view class="title">
          <text>手机号码快捷登录</text>
          <image src="../../static/login/title.png" />
        </view>
        <view class="subtitle">未注册过的手机号码将自动注册</view>
        <view class="phone-input">
          <view class="country-code">+86</view>
          <input type="number" maxlength="11" v-model="form.phoneNumber" placeholder="请输入手机号码" placeholder-style="color: #818181;" />
        </view>
        <view class="code-input">
          <input type="number" v-model="form.code" placeholder="请输入验证码" placeholder-style="color: #818181;" />
          <view class="send-code" @click="sendCode">{{ codeTime != 0 ? `重新获取(${codeTime}s)` :'获取验证码'}}</view>
        </view>
        <view class="login-btn" @click="login">登录</view>
      </view>
      <view class="wechat-login">
        <view @click="goBack()">
          <view class="u-flex u-row-center u-col-center u-m-b-26" style="gap: 34rpx;">
          <view class="wechat-login-line"></view>
          <image src="../../static/login/weChatLogo.png" />
          <view class="wechat-login-line"></view>
        </view>
        <view>微信一键登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { loginPhone, sendRegisterCode, getUserInfo, saveInviteCode } from '@/api/index'
import { phoneReg } from '@/common/util'
let times = null

export default {
  data() {
    return {
      form: {
        phoneNumber: '',
        code: '',
      },
      codeTime: 0
    };
  },
  onLoad() {},
  methods: {
    sendCode() {
      const that = this
      if(!phoneReg(that.form.phoneNumber)) {
        return
      }
      if(that.codeTime != 0) {
        return
      }
      if(times) {
        clearInterval(times)
        times = null
      }
      sendRegisterCode({phoneNumber: that.form.phoneNumber}).then(res => {
        uni.showToast({
          icon: 'none',
          title: res.msg
        })
        that.codeTime = 120
        times = setInterval(() => {
          if(that.codeTime == 0) {
            clearInterval(times)
            times = null
            return
          }
          that.codeTime = that.codeTime - 1
        }, 1000)
      })
    },
    login() {
      const that = this
      if(!phoneReg(this.form.phoneNumber)) {
        return
      }
      if(!this.form.code) {
        return
      }
      loginPhone(this.form).then(async res => {
        const token = 'Bearer ' + res.data.access_token
			  uni.setStorageSync('token', token)
        getUserInfo({}).then(async res => {
			    uni.setStorageSync('userInfo', {...res.user, roles: res.roles})
          if(uni.getStorageSync('invitationCode') && !res.user.invitationName) {
            const parameter = {
              userId: res.user.userId,
              invitationCode: uni.getStorageSync('invitationCode'),
            }
            saveInviteCode(parameter)
            uni.removeStorageSync('invitationCode')
          }
        })
        if(uni.getStorageSync('invitationUrl')) {
          that.reLaunch(uni.getStorageSync('invitationUrl'))
          return
        }
        uni.showToast({
          icon: 'none',
          title: `登录成功`
        })
        setTimeout(() => {
          that.reLaunch('/pages/index/index')
        }, 1000)
      })

    }
  },
  beforeDestroy() {
    if(times) {
      clearInterval(times)
      times = null
      this.codeTime = 0
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background: #FFFFFF;
  position: relative;
  display: flex;
  flex-direction: column;
  .title {
    padding-top: 66rpx;
    margin-bottom: 40rpx;
    display: flex;
    align-items: flex-end;
    font-weight: 500;
    font-size: 40rpx;
    color: #53BE07;
    image {
      width: 140rpx;
      height: 92rpx;
      margin-left: 8rpx;
    }
  }
  .subtitle {
    font-size: 28rpx;
    color: #333333;
    margin-bottom: 82rpx;
  }
  .phone-input {
    width: 100%;
    height: 100rpx;
    border-radius: 8rpx;
    border: 2rpx solid #53BE07;
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;
    .country-code {
      width: 124rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      border-right: 2rpx solid #53BE07;
    }
    input {
      flex: 1;
      height: 100%;
      padding: 0 22rpx;
      font-size: 28rpx;
      color: #333333;
    }
  }
  .code-input {
    width: 100%;
    height: 100rpx;
    border-radius: 8rpx;
    border: 2rpx solid #53BE07;
    display: flex;
    align-items: center;
    margin-bottom: 124rpx;
    input {
      flex: 1;
      height: 100%;
      padding: 0 22rpx;
      font-size: 28rpx;
      color: #333333;
    }
    .send-code {
      width: 244rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      font-size: 28rpx;
      color: #53BE07;
      border-left: 2rpx solid #53BE07;
    }
  }
  .login-btn {
    width: 654rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center; 
    background: linear-gradient( 90deg, rgba(86,203,3,0.5) 0%, #56CB03 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
  }
  .wechat-login {
    padding-bottom: 116rpx;
    gap: 34rpx;
    font-size: 24rpx;
    color: #000000;
    text-align: center;

    .wechat-login-line {
      width: 160rpx;
      height: 2rpx;
      background-color: #E1E1E1;
    }
    image {
      display: block;
      width: 70rpx;
      height: 70rpx;
      flex-shrink: 0;
    }
  }
}
</style>
